<!DOCTYPE html>
<html>
    <head>
        <title>AddTime</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="shortcut icon"  href="image/icon6.ico" type="image/x-icon" /> 
        <link href="css/allcss.css" rel="stylesheet" type="text/css"/>
        <script src="./script/chart.js"></script>
        <script src="./script/jquery.js"></script>
    </head>
    <body>
        <div id="aside">
            <img id="icon" src="./image/icon6.png">
            <div id="p1">管理员界面</div>         
        </div>
        <div id="title"></div>
        <button id="addNewPlaceTime_return_button" onclick="add1(event)">返回</button>
        <div id="addNewPlaceTime_placename"></div>
        <div id="addNewPlaceTime_content_1" class="addNewPlaceTime_content">
            <div id="date0"></div>
            <div><canvas id="myChart0"></canvas></div>
            <div>起始时间<input id="time_s0" type="time"/>结束时间<input id="time_e0" type="time"/></div>
            <button id="addNewPlaceTime_button0" class="addNewPlaceTime_button" value="0" onclick="add(event)">新增时间段</button>
        </div>
        <div class="addNewPlaceTime_content">
            <div id="date1" ></div>
            <div><canvas id="myChart1"></canvas></div>
            <div>起始时间<input id="time_s1" type="time"/>结束时间<input id="time_e1" type="time"/></div>
            <button id="addNewPlaceTime_button1" class="addNewPlaceTime_button" value="1" onclick="add(event)">新增时间段</button>
        </div>
        <div id="addNewPlaceTime_content_3" class="addNewPlaceTime_content">
            <div id="date2"></div>
            <div><canvas id="myChart2"></canvas></div>
            <div>起始时间<input id="time_s2" type="time" />结束时间<input id="time_e2" type="time"/></div>
            <button id="addNewPlaceTime_button2" class="addNewPlaceTime_button" value="2" onclick="add(event)" >新增时间段</button>
        </div>
        <script>
            const urlParams = new URLSearchParams(window.location.search);
            var name = urlParams.get('PlaceNumber');
            $("#addNewPlaceTime_placename").html(urlParams.get('placename'));
            const charts = new Array();
            const color1 = ['rgba(0, 255, 0, 0.6)', 'rgba(255, 0, 0, 0.8)'];
            const color2 = ['rgba(255, 0, 0, 0.8)', 'rgba(0, 255, 0, 0.6)'];
            function inital(datas1, datas2, i) {
                var data = {labels: datas2, datasets: [{data: datas1, backgroundColor: ['rgba(0, 255, 0, 0.6)', 'rgba(255, 0, 0, 0.8)']}]};
                var ctx = document.getElementById('myChart' + i).getContext('2d');
                var myChart = new Chart(ctx, {
                    type: 'pie',
                    data: data,
                    options: {responsive: true, maintainAspectRatio: false, legend: {position: 'bottom'}}
                });
                charts.push(myChart);
            }
            function add(event) {
                var id = event.target.value;
                var placeDate = $("#date" + id).html();
                var startTime = $("#time_s" + id).val();
                var endTime = $("#time_e" + id).val();
                if (startTime !== '' || endTime !== '') {
                    if (startTime < endTime) {
                        $.get("./Servlet/addPlaceTimeServlet?placeNumber=" + name + "&placeDate=" + placeDate + "&startTime=" + startTime + "&endTime=" + endTime, function (data, status) {
                            if (status) {
                                if (data !== "-1") {
                                    getData(name, placeDate, id);
                                    alert("成功");
                                } else
                                    alert("失败");
                            }
                        });
                    } else {
                        alert("时间错误");
                    }
                }
            }
            function getDates() {
                $.get("./Servlet/queryPlaceTimesServlet?type=0", function (data, status) {
                    if (status) {
                        var dates = JSON.parse(data);
                        for (let i = 0; i < dates.length; i++) {
                            $("#date" + i).html(dates[i]);
                            getData(name, dates[i], i);
                        }
                    }
                });
            }
            function getData(placeNumber, placeDate, id) {
                $.get("./Servlet/queryPlaceTimesServlet?type=1&placeNumber=" + placeNumber + "&placeDate=" + placeDate, function (data, status) {
                    if (status) {
                        var res_0 = JSON.parse(data);
                        var res = res_0.times;
                        var status = res_0.status;
                        var datas1 = new Array();
                        var datas2 = new Array();
                        for (let i = 0; i < res.length; i++) {
                            datas1.push(res[i].interval);
                            datas2.push(res[i].lable);
                        }
                        if (status)
                            refresh(datas1, datas2, color1, id);
                        else
                            refresh(datas1, datas2, color2, id);
                    } else
                        alert("网络连接失败");
                });
            }
            function refresh(datas1, datas2, color, i) {
                charts[i].data.labels = datas2;
                charts[i].data.datasets[0].data = datas1;
                charts[i].data.datasets[0].backgroundColor = color;
                charts[i].update();
            }
            function add1(event) {
                var id = event.target.id;
                var placeNumber = event.target.value;
                window.location.href = "updatePlace.jsp?placenumber=" + name;
            }
            inital([], [], 0);
            inital([], [], 1);
            inital([], [], 2);
            getDates();
        </script>
    </body>
</html>
